<template>
	<div class="cateListContainer">
		<swiper :indicator-dots="true" :autoplay="true" indicator-color="green" indicator-active-color="pink">
			<swiper-item v-for="(swiperItem, index) in cateObj.category.bannerUrlList" :key="index"><image :src="swiperItem" mode=""></image></swiper-item>
		</swiper>
		<text class="title">{{ cateObj.category.name }}</text>
		<text class="desc">{{ cateObj.category.frontDesc }}</text>
		<ShopList :shopList="cateObj.itemList"></ShopList>
	</div>
</template>

<script>
import ShopList from '../shopList/shopList.vue';
import request from '../../utils/request.js';
export default {
	props: ['navIndex'],
	components: {
		ShopList
	},
	data() {
		return {
			cateList: []
		};
	},
	// 页面渲染后的生命周期钩子
	async mounted() {
		// 显示提示信息
		wx.showLoading({
			title: '正在加载中'
		});
		this.cateList = await request('/getindexCateList');
		// console.log(this.cateList)
		// 隐藏的提示信息
		wx.hideLoading();
	},
	computed: {
		// 返回的是一个对象
		cateObj() {
			return this.cateList.find(item => item.category.parentId === this.navIndex);
		}
	}
};
</script>

<style lang="stylus">
.cateListContainer
	swiper
		width 100%
		height 370upx
		image
			width 100%
			height 100%
	.title
		display block
		text-align center
		font-size 34upx
		color #333
		line-height 70upx
	.desc
		display block
		text-align center
		font-size 24upx
		color #999
		line-height 40upx
</style>
